<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>购物车页面</title>

		<link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css" />
		<link href="basic/css/demo.css" rel="stylesheet" type="text/css" />
		<link href="css/cartstyle.css" rel="stylesheet" type="text/css" />
		<link href="css/optstyle.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="js/jquery.js"></script>

	</head>

	<body>

		<jsp:include page="header.jsp"></jsp:include>

			<div class="clear"></div>

			<!--购物车 -->
			<div class="concent">
				<div id="cartTable">
					<div class="cart-table-th">
						<div class="wp">
							<div class="th th-chk">
								<div id="J_SelectAll1" class="select-all J_SelectAll">

								</div>
							</div>
							<div class="th th-item">
								<div class="td-inner">商品信息</div>
							</div>
							<div class="th th-price">
								<div class="td-inner">单价</div>
							</div>
							<div class="th th-amount">
								<div class="td-inner">数量</div>
							</div>
							<div class="th th-sum">
								<div class="td-inner">金额</div>
							</div>
							<div class="th th-op">
								<div class="td-inner">操作</div>
							</div>
						</div>
					</div>
					<div class="clear"></div>

					<tr class="item-list">
						<div class="bundle  bundle-last ">
							<div class="bundle-hd">
							</div>
							<div class="clear"></div>
							<div class="bundle-main">

								
								<c:forEach items="${cartList}" var="cart">
                                    <c:forEach items="${goodsList}" var="goods">
                                        <c:if test="${cart.goodsId==goods.goodsId}">
                                            <ul class="item-content clearfix">
                                                <li class="td td-chk">
                                                    <div class="cart-checkbox ">
                                                        <c:if test="${cart.isCheck==1}">
															<input class="check" id="J_CheckBox_170037950254" name="items[]" value="1" checked type="checkbox">
														</c:if>
														<c:if test="${cart.isCheck==-1}">
															<input class="check" id="J_CheckBox_170037950254" name="items[]" value="-1" type="checkbox">
														</c:if>
                                                        <label for="J_CheckBox_170037950254"></label>
                                                    </div>
                                                </li>
                                                <li class="td td-item">
                                                    <div class="item-pic">
                                                        <a href="info?id=${goods.goodsId}" target="_blank" data-title="${goods.goodsId}" class="J_MakePoint" data-point="tbcart.8.12">
                                                            <img height="80px" width="80px" src="${goods.goodsThums}" class="itempic J_ItemImg"></a>
                                                    </div>
                                                    <div class="item-info">
                                                        <div class="item-basic-info">
                                                            <a href="info?id=${goods.goodsId}" target="_blank" title="${goods.goodsName}" class="item-title J_MakePoint" data-point="tbcart.8.11">${goods.goodsName}</a>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="td td-info">
                                                    <div class="item-props item-props-can">
                                                    </div>
                                                </li>
                                                <li class="td td-price">
                                                    <div class="item-price price-promo-promo">
                                                        <div class="price-content">
                                                            <div class="price-line">
                                                                <em class="price-original">${goods.marketPrice}</em>
                                                            </div>
                                                            <div class="price-line">
                                                                <em class="J_Price price-now"  tabindex="0">${goods.shopPrice}</em>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="td td-amount">
                                                    <div class="amount-wrapper ">
                                                        <div class="item-amount ">
                                                            <div class="sl">
                                                                <input class="min am-btn" name="" type="button" value="-"/>
                                                                <input class="text_box" name="" type="text" value="${cart.goodsCnt}" style="width:30px;" />
																<span class="goodsId" style="display: none">${cart.goodsId}</span>
                                                                <input class="add am-btn" name="" type="button" value="+" />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li class="td td-sum">
                                                    <div class="td-inner">
                                                        <em tabindex="0" class="J_ItemSum number">${cart.goodsCnt*goods.shopPrice}</em>
                                                    </div>
                                                </li>
                                                <li class="td td-op">
                                                    <div class="td-inner">
                                                        <a title="移入收藏夹" class="btn-fav" onclick="fav(${cart.goodsId})">
                                                            移入收藏夹</a>
                                                        <a href="deleteCart?id=${cart.goodsId}" data-point-url="#" class="delete">
                                                            删除</a>
                                                    </div>
                                                </li>
                                            </ul>
                                        </c:if>
                                    </c:forEach>
                                </c:forEach>
							</div>
						</div>
					</tr>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>

				<div class="float-bar-wrapper">
					<div id="J_SelectAll2" class="select-all J_SelectAll">
						<div class="cart-checkbox">
							<c:if test="${sum.size()==cartList.size()}">
								<input class="check-all check" id="J_SelectAllCbx2" name="select-all" checked value="true" type="checkbox">
							</c:if>
							<c:if test="${sum.size()<cartList.size()}">
								<input class="check-all check" id="J_SelectAllCbx2" name="select-all" value="true" type="checkbox">
							</c:if>
							<label for="J_SelectAllCbx2"></label>
							<script type="text/javascript">
								//修改全选
								$("input[name='select-all']").change(function () {
									var isCheck = 0;
									if ($(this).is(":checked")) {
										isCheck = 1;
									}else {
										isCheck = -1;
									}
									$.ajax({
										url:"isCheckAll?isCheck="+isCheck,
										success:function () {
											totalPrice();
											location.reload(location);
										},
										error:function () {

										}
									})
								})
								function fav(goodsId) {
									$.ajax({
										url:"like?type=add&goodsId="+goodsId,
										success:function (data) {
											if (data=="true"){
												alert("成功加入收藏夹!");
											} else {
												alert("已经加入收藏夹!");
											}
										},
										error:function () {
											alert("未知错误");
										}
									})
								}
							</script>
						</div>
						<span>全选</span>
					</div>
					<div class="operations">
						<a href="deleteIsCheck" hidefocus="true" class="deleteAll">删除</a>
<%--						<a href="like?type=addCartCheck" hidefocus="true" class="J_BatchFav">移入收藏夹</a>--%>
					</div>

					<div class="float-bar-right">
						<div class="amount-sum">
							<span class="txt">已选商品</span>
							<em id="J_SelectedItemsCount" style="color: red">${sum.size()}</em><span class="txt">件</span>
							<div class="arrow-box">
								<span class="selected-items-arrow"></span>
								<span class="arrow"></span>
							</div>
						</div>
						<div class="price-sum">
							<span class="txt">合计:</span>
							<strong class="price">¥<em id="J_Total">0.00</em></strong>
						</div>
						<div class="btn-area">
							<c:if test="${cartList.size()==0}">
								<a href="javascript:void(0);" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
									<span>结&nbsp;算</span></a>
							</c:if>
							<c:if test="${cartList.size()>0}">
								<a href="payCart" id="J_Go" class="submit-btn submit-btn-disabled" aria-label="请注意如果没有选择宝贝，将无法结算">
									<span>结&nbsp;算</span></a>
							</c:if>
						</div>
					</div>
				</div>
				<jsp:include page="foot.jsp"></jsp:include>

			</div>

			<!--操作页面-->

			<div class="theme-popover-mask"></div>

			<div class="theme-popover">
				<div class="theme-span"></div>
				<div class="theme-poptit h-title">
					<a href="javascript:;" title="关闭" class="close">×</a>
				</div>
				<div class="theme-popbod dform">
					<form class="theme-signin" name="loginform" action="" method="post">

						<div class="theme-signin-left">

							<li class="theme-options">
								<div class="cart-title">颜色：</div>
								<ul>
									<li class="sku-line selected">12#川南玛瑙<i></i></li>
									<li class="sku-line">10#蜜橘色+17#樱花粉<i></i></li>
								</ul>
							</li>
							<li class="theme-options">
								<div class="cart-title">包装：</div>
								<ul>
									<li class="sku-line selected">包装：裸装<i></i></li>
									<li class="sku-line">两支手袋装（送彩带）<i></i></li>
								</ul>
							</li>
							<div class="theme-options">
								<div class="cart-title number">数量</div>
								<dd>
									<input class="min am-btn am-btn-default" name="" type="button" value="lose" />
									<input class="text_box" name="" type="text" value="1" style="width:30px;" />
									<input class="add am-btn am-btn-default" name="" type="button" value="puls" />
									<span  class="tb-hidden">库存<span class="stock">1000</span>件</span>
								</dd>

							</div>
							<div class="clear"></div>
							<div class="btn-op">
								<div class="btn am-btn am-btn-warning">确认</div>
								<div class="btn close am-btn am-btn-warning">取消</div>
							</div>

						</div>
						<div class="theme-signin-right">
							<div class="img-info">
								<img src="images/kouhong.jpg_80x80.jpg" />
							</div>
							<div class="text-info">
								<span class="J_Price price-now">¥39.00</span>
								<span id="Stock" class="tb-hidden">库存<span class="stock">1000</span>件</span>
							</div>
						</div>

					</form>
				</div>
			</div>
		<!--引导 -->
		<div class="navCir">
			<li><a href="home2.html"><i class="am-icon-home "></i>首页</a></li>
			<li><a href="sort.html"><i class="am-icon-list"></i>分类</a></li>
			<li class="active"><a href="shopcart.jsp"><i class="am-icon-shopping-basket"></i>购物车</a></li>
			<li><a href="../person/index.html"><i class="am-icon-user"></i>我的</a></li>					
		</div>
	<script type="text/javascript">
		//计算总金额
		function totalPrice() {
			//获取商品列表
			var goods = $("input[class='check']:checked");
			var sum = 0.0;
			$.each(goods,function (i,v) {
				var price = $(v).parents("ul").find(".td-inner").text();
				sum += parseFloat(price);
			})
			//购物车商品总价
			$("#J_Total").text(sum.toFixed(2));
		}
		$(function () {
			totalPrice();
		})
		//修改购物车商品数量
		$("input[class='text_box']").change(function () {
			var id = $(this).parents("ul").find(".goodsId").text();
			var count = parseInt($(this).val());
			var type = "change";
			if (count<1){
				alert("商品数量不能小于1");
				location.reload();
			} else {
				location.href="changeCount?id="+id+"&type="+type+"&count="+count;
			}
		});
		//修改购物车商品选中状态
		$("input[class='check']").change(function () {
			var id = $(this).parents("ul").find(".goodsId").text();
			var check = -1;
			if ($(this).is(":checked")){
				check = 1;
			}else {
				check = -1;
			}
			$.ajax({
				url:"isCheck?id="+id+"&check="+check,
				success:function () {
					totalPrice();
					location.reload(location)
				},
				error:function () {
					alert("网络不给力!,请稍后再试!");
				}
			})
		})
		//点击按钮减数量
		$("input[value='-']").click(function () {
			var id = $(this).parents("ul").find(".goodsId").text();
			var type = "lose";
			location.href="changeCount?id="+id+"&type="+type;
		})
		//点击按钮加数量
		$("input[value='+']").click(function () {
			var id = $(this).parents("ul").find(".goodsId").text();
			var type = "plus";
			location.href="changeCount?id="+id+"&type="+type;
		})
	</script>
	</body>
</html>